import React, { useState } from 'react';
import {
  Divider,
  Row,
  Col,
  Radio,
  InputNumber,
  Slider,
  Button,
  Checkbox,
  Popover,
  Switch,
  Input,
  Space,
  Dropdown,
  Tag,
  Tooltip,
} from 'antd';
import './index.less';
import SelectRadioModel from '@/components/SelectRadioModel';
import EditLink from '@/components/EditLink';
import WePageSelect from './components/wePageSelect';
const SelectLink = (props) => {
  const { data, handleUpdate, wePageType } = props;
  const [editVisible, setEditVisible] = useState(false);
  const [shopEdit, setShopEdit] = useState(false);
  const [wepageVisible, setWepageVisible] = useState(false);
  const renderTag = (item) => {
    const { linkType, linkSrc, linkData } = item;
    if (linkType === 'customize') {
      return '链接|' + linkSrc;
    } else if (linkType === 'wepage') {
      const { pageName } = linkData;
      return '微页面|' + pageName;
    } else {
      const { goodsName } = linkData;
      return '商品|' + goodsName;
    }
  };
  const items = (index, item) => {
    return [
      {
        label: (
          <Button
            onClick={() => {
              setShopEdit({
                show: true,
                details: [],
                index: index,
              });
            }}
            type="link"
          >
            商品
          </Button>
        ),
        key: '0',
      },
      {
        label: (
          <Button
            onClick={() => {
              setWepageVisible({
                show: true,
                details: [],
                index: index,
              });
            }}
            type="link"
          >
            微页面
          </Button>
        ),
        key: '2',
      },
      {
        label: (
          <Button
            onClick={() => {
              setEditVisible({
                show: true,
                detail: item,
                index: index,
              });
            }}
            type="link"
          >
            自定义链接
          </Button>
        ),
        key: '1',
      },
      {
        label: (
          <Button
            onClick={() => {
              handleUpdate({
                linkType: '',
                linkData: {},
                linkSrc: '',
              });
            }}
            type="link"
          >
            重置
          </Button>
        ),
        key: '4',
      },
    ];
  };
  const { linkType } = data;
  return (
    <Space>
      {linkType ? (
        <Tooltip title={renderTag(data)}>
          <div
            style={{
              width: '100%',
              height: '32px',
              display: 'flex',
              alignItems: 'center',
              position: 'relative',
            }}
          >
            <Tag className="font_hide" /* closable={true} */ style={{ width: 80, position: 'relative' }}>
              {renderTag(data)}
            </Tag>
          </div>
        </Tooltip>
      ) : (
        ''
      )}
      <div>
        <Dropdown
          menu={{
            items: items(data),
          }}
        >
          <Button type="link">{linkType ? '修改' : '选择跳转到的页面'}</Button>
        </Dropdown>
      </div>
      <SelectRadioModel
        onOk={(e) => {
          if (e[0]) {
            handleUpdate({
              linkType: 'shop',
              linkData: e[0],
            });
          }
        }}
        visible={shopEdit}
        onClose={() => setShopEdit(false)}
      />
      <EditLink
        handleCallback={(e) => {
          handleUpdate({
            linkType: 'customize',
            ...e,
          });
        }}
        visible={editVisible}
        onClose={() => {
          setEditVisible(false);
        }}
      />

      <WePageSelect
        onOk={(e) => {
          if (e) {
            handleUpdate({
              linkType: 'wepage',
              linkData: e,
            });
          }
        }}
        visible={wepageVisible}
        wePageType={wePageType}
        onClose={() => setWepageVisible(false)}
      />
    </Space>
  );
};
export default SelectLink;
